<template>
  <div>
    <Header/>
    <div class="contentBox">
      <div class="container">
        <div class="app-container">
          <el-row>
            <el-col :span="8" class="overflowheight">
              <div style="margin-right: 20px;min-height: 800px">
                <el-link
                    target="_blank"
                    :href="fileDownloadUrl"
                    :underline="false"
                    style="margin-left:15px"
                >
                  <el-button size="mini" type="warning">下载代码</el-button>
                </el-link>
                <div class="filter-container">
                  <span>{{ projectName }}-代码树</span>
                </div>
                <el-tree
                    v-loading="loading"
                    class="filter-tree"
                    :data="projectFileTree"
                    :props="defaultProps"
                    node-key="name"
                    :default-expanded-keys="[openLocation]"
                    @node-click="showCode"
                    ref="tree"
                >
                </el-tree>
              </div>
              <iframe
                  id="codeFrame"
                  ref="iframes"
                  style="display:none"
              ></iframe>
            </el-col>
            <!-- <el-col :span="8" class="overflowheight">
              <div v-if="article_type !== ''" id="codeView" v-highlight>
                <pre><code v-html="article_type"></code></pre>
              </div>
            </el-col> -->
            <el-col :span="16" class="overflowheight">
              <myCode
                  v-if="values != '' && isshow"
                  :value="values"
                  :language="language"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {GeneratorCodeTreeRequest} from "@/sdk/modules/generator/code/tree";
import Code from "@/views/preview/code.vue";
import Header from "@/components/Header.vue";

export default {
  name: "project-preview",
  data() {
    return {
      loading: false,
      projectId: undefined,
      projectName: undefined,
      fileDownloadUrl: "",
      openLocation: "",
      projectFileTree: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      article_type: "",
      values: "",
      language: "",
      isshow: false
    };
  },
  created() {
    this.projectId = this.$route.query.id;
    this.projectName = this.$route.query.name;
    this.loadData();
  },
  components: {
    Header,
    myCode: Code
  },
  methods: {
    loadData() {
      this.listLoading = true;
      let request = new GeneratorCodeTreeRequest();
      request.setParams({projectId: this.projectId});
      request
          .api()
          .then(res => {
            let fileTree = res.data.fileTree;
            this.projectName = fileTree.name;
            this.fileDownloadUrl = res.data.fileDownloadUrl;
            if (fileTree.children.length > 0) {
              this.openLocation = fileTree.children[0].name;
            } else {
              this.openLocation = fileTree.name;
            }
            console.log("openLocation", this.openLocation);
            this.projectFileTree.push(fileTree);
            this.listLoading = false;
          })
          .catch(err => {
            this.listLoading = false;
          });
    },
    showCode(data) {
      if (!data.directory) {
        this.isshow = false;
        let _this = this;
        var iframe01 = this.$refs.iframes;

        let path = data.path.split(".");
        this.language = path[path.length - 2];
        iframe01.src = `${data.path}`;
        if (iframe01.attachEvent) {
          iframe01.attachEvent("onload", function () {
            //其它处理代码
          });
        } else {
          iframe01.onload = function () {
            //其它处理代码
            _this.renderIframe();
          };
        }
      }
    },

    renderIframe() {
      var iframe = this.$refs.iframes;
      // console.log("iframe----", iframe)
      // console.log("iframe-document---", iframe.contentWindow)
      var iwindow = iframe.contentWindow;
      var idoc = iwindow.document;
      this.article_type = idoc.body.innerHTML;
      this.values = this.htmlDecodeByRegExp(
          idoc.body.innerHTML.replace(/<.*?>/gi, "")
      );
      this.isshow = true;
    },
    /*4.用正则表达式实现html解码（反转义）*/
    htmlDecodeByRegExp(str) {
      var temp = "";
      if (str.length == 0) {
        return "";
      }
      temp = str.replace(/&amp;/g, "&");
      temp = temp.replace(/&lt;/g, "<");
      temp = temp.replace(/&gt;/g, ">");
      temp = temp.replace(/&nbsp;/g, " ");
      temp = temp.replace(/&#39;/g, "'");
      temp = temp.replace(/&quot;/g, '"');
      return temp;
    }
  }
};
</script>

<style lang="scss" scoped>
.contentBox {
  padding: 10px 30px;
}

.overflowheight {
  overflow: auto;
  height: calc(100vh - 135px);
}

.filter-tree {
  overflow: inherit;

  ::v-deep .el-tree-node > .el-tree-node__children {
    overflow: inherit;
  }
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

pre {
  margin: 0;
}
</style>
